<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <link rel="stylesheet" href="css/base.css">
    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
    <title>陈子驭</title>
</head>
<body>
    <div class="anchor_layer" id="navHeight">
        <div class="nav_wrap" id="nav_wrap"> 
            <div class="wrap_layer">
              <div class="wrap_tab"><a class="tab active" href="#about">ABOUT</a></div>
              <div class="wrap_tab"><a class="tab" href="#hobby">HOBBY</a></div>
              <div class="wrap_tab"><a class="tab" href="#works">WORKS</a></div>
              <div class="wrap_tab"><a class="tab" href="#contact">CONTACT</a></div> 
            </div>
        </div>
    </div>
    <div class="home">
        <img src="images/headpic.JPG" alt="" class="headpic">
        <h2 class="motto">未来很可怕，但你不能因为熟悉过去就一直待在原来的地方。      
        </h2>
    </div>
    <div id="about">
        <div class="head">
            <h1><a href="#about">About</a></h1>
        </div>
        <div class="intro"> 
            <div class="intro-content">
                <img src="images/scarlet.jpg" alt="" class="about-pic">
                <ul class="about-text">
                    <li>姓名：陈子驭</li>
                    <li>性别：女</li>
                    <li>年龄：20</li>
                    <li>籍贯：湖南长沙</li>
                    <li>学校：武汉工程大学</li>
                    <li>专业：软件工程</li>
                    <li>爱好：看美剧</li>
                </ul>
            </div>

        </div>
    </div>
    <div id="hobby">
        <div class="head">
            <h1><a href="#hobby">Hobby</a></h1>
        </div>
        <div class="hobby">    
            <div id="tvs" >
                <div class="item">
                    <img src="images/tbbt.jpg" title="the big bang theory" />
                    <div class="content">
                        <div class="caption" >
                            <h2>生活大爆炸</h2>
                            <p>不是每个人都能功成名就，我们有些人注定要在日常生活的点滴中寻找生命的意义。</p>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <img src="images/got.jpg" title="game of thrones" />
                    <div class="content">
                        <div class="caption" >
                            <h2>权力的游戏</h2>
                            <p>力量存于人心，信则有，不信则无。惑人的游戏，如影浮墙。即便是矮小之人，也能投射出巨大的影子。</p>
                        </div>
                    </div>
                </div>
                <div class="item item-last">
                    <img src="images/oitnb.jpg" title="orange is the new black" />
                    <div class="content">
                        <div class="caption" >
                            <h2>女子监狱</h2>
                            <p>如果你不努力创造未来，那是因为你不相信未来的存在。</p>
                        </div>
                    </div>
 
                </div>
                <div class="item">
                    <img src="images/agxq.jpg" title="the good wife" />
                    <div class="content">
                        <div class="caption">
                            <h2>傲骨贤妻</h2>
                            <p>事情不会变得容易，但是你会让你自己更擅长处理这些事。生活只会让你变得更强大。</p>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <img src="images/zmnr.jpg" title="why woman kill" />
                    <div class="content">
                        <div class="caption" >
                            <h2>致命女人</h2>
                            <p>这就是你的生活，空荡荡的没有灵魂。你被你的日常生活淹没了。我知道，因为我也在和你一起溺水。但是，如果我们相互扶持，我们就能活下来。</p>
                        </div>
                    </div>
                </div>
                <div class="item item-last">
                    <img src="images/mdjt.jpg" title="moden family" />
                    <div class="content">
                        <div class="caption" >
                            <h2>摩登家庭</h2>
                             <p>每年的这个时候，我们就会经常谈论传统，尽管我们深爱着本人的传统，但有时候我们最美好的回忆，却来自最颠覆传统的时刻。</p>
                        </div>
                    </div>   
                </div>     
            </div>
        </div>
    </div>
    <div id="works">
        <div class="head">
            <h1><a href="#works">Works</a></h1>
        </div>
        <div class="intro">
            <div class="pic" id="pic">
                <span class="prev"><img src="images/arrow1.png" alt="arrow" /></span>
                <span class="next"><img src="images/arrow2.png" alt="arrow" /></span>
                <ul>
                    <li class="pic1"><a href="https://chenziyu07.gitee.io/xiaomishouye/"><img src="images/xiaomimall.png" /></a></li>
                    <li class="pic2"><a href="https://chenziyu07.gitee.io/home_list__page"><img src="images/home+listpage.png" /></a></li>
                    <li class="pic3"><a href="https://chenziyu07.gitee.io/xiaomilogin"><img src="images/xiaomilogin.png" ></a></li>
                    <li class="pic4"><a href="https://chenziyu07.gitee.io/git-test/"><img src="images/home+user.png" /></a></li>
                    <li class="pic5"><a href="https://chenziyu07.gitee.io/muxifloor"><img src="images/muxifloor.png" /></a></li>

                </ul>
            </div>
        </div>
    </div>
    <div id="contact">
        <div class="head">
            <h1><a href="#contact">Contact</a></h1>
        </div>
        <div class="intro">
            <div class="contact-content">
                <div class="message">
                    <input id="name" type="text" placeholder="name">
                    <input id="eml" type="text" placeholder="email">
                    <input id="masg" type="text" placeholder="message">
                    <button id="btn">send</button>
                </div>
                <div class="msg">
                    <div class="where">
                        <img class="size" src="images/dibiao.png">
                        <p class="inform">中国，湖南省，长沙市</p>
                    </div>
                    <div class="email">
                        <img class="size" src="images/mail.png">
                        <p class="inform">1509473256@qq.com</p>
                    </div>
                    <div class="phone">
                        <img class="size" id="phone" src="images/dianhua.png">
                        <p class="inform">13085521455</p>
                    </div>
                </div>      
            </div>
            
        </div>
    </div>
    <div class="footer">
        <p>Design by ChenZiyu</p>
    </div>

    <script src="js/carousel.js"></script>
    <script src="js/nav.js"></script>
</body>
</html>